<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>购物车</title>
<style type="text/css">
	
	h1{
		text-align: center;
	}
	table{
		margin: 0 auto;
		width:60%;
		border: 2px solid #aaa;
		border-collapse: collapse;
	}
	table th,table td {
		border: 2px solid #aaa;
		padding: 5px;
	}
 
</style>
</head>
<body>
 
	<h1>商品：真划算 </h1>
	<table id="stuff_table">
		<thead>
			<tr>
				<th>商品</th>
				<th>单价</th>
				<th>颜色</th>
				<th>库存</th>
				<th>好评率</th>
				<th>操作</th>
			</tr>
		</thead>
			<tr>
				<td class="name">罗技M185鼠标</td>
				<td>80</td>
				<td>黑色</td>
				<td>666</td>
				<td>98%</td>
				<td align="center">
					<input type="button" value="加入购物车" onclick="add_shoppingcar(this);" />
				</td>
			</tr>
			<tr>
				<td class="name">罗技M185键盘</td>
				<td>80</td>
				<td>白色</td>
				<td>666</td>
				<td>96%</td>
				<td align="center">
					<input type="button" value="加入购物车" onclick="add_shoppingcar(this);" />
				</td>
			</tr>
			<tr>
				<td class="name">iPhone手机壳</td>
				<td>60</td>
				<td>透明</td>
				<td>6667</td>
				<td>99.9%</td>
				<td align="center">
					<input type="button" value="加入购物车" onclick="add_shoppingcar(this);" />
				</td>
			</tr>
			<tr>
				<td class="name">蓝牙耳机</td>
				<td>80</td>
				<td>蓝色</td>
				<td>666</td>
				<td>98%</td>
				<td align="center">
					<input type="button" value="加入购物车" onclick="add_shoppingcar(this);" />
				</td>
			</tr>
			<tr>
				<td class="name">金士顿U盘</td>
				<td>80</td>
				<td>金色</td>
				<td>466</td>
				<td>100%</td>
				<td align="center">
					<input type="button" value="加入购物车" onclick="add_shoppingcar(this);" />
				</td>
			</tr>
	</table>
	
	<h1>购物车</h1>
	<table>
		<thead>
			<tr>
				<th>商品</th>
				<th>单价</th>
				<th>数量</th>
				<th>金额</th>
				<th>删除</th>
			</tr>
		</thead>
		<tbody id="goods">
		</tbody>
		<tfoot>
			<tr>
				<td colspan="3" align="center">总计</td>
				<td id="total"></td>
				<td></td>
			</tr>
		</tfoot>
	</table>
</body>
<script type="text/javascript" src="../jquery/jquery-1.8.3.js"></script>
<script>
	
function add_shoppingcar(btn) {
	$tr = $(btn).parent().siblings();
	$name = $tr.eq(0).html();
	$price = $tr.eq(1).html();
	var new_tr = $("<tr>"+
			"<td>"+$name+"</td>"+
			"<td>"+$price+"</td>"+
			"<td align='center'>"+
			"<input type='button' value='-' onclick='change(this,-1);' />"+
			"<input type='text' id='num' size='1' readonly='readonly' value='1'/>"+
			"<input type='button' value='+' onclick='change(this,+1);' />"+"</td>"+
			"<td>"+$price+"</td>"+
			"<td align='center'>"+
			"<input type='button' value='X' onclick='del(this);'/>"+
			"</td></tr>"); 
	$("#goods").append($(new_tr));
	total();
	
}
 
function del(obj) {
	$tr = $(obj).parent().parent();
	$tr.remove();
	total();
}
 
function total() {
	$trs = $("#goods tr");
	$sum = 0;
	for(var i=0;i<$trs.length; i++){
		$tds = $trs.eq(i).children();
		$price = parseFloat($tds.eq(3).html());
		$sum += $price;
	}
	$("#total").html($sum);
	
}
function change(btn,n) {
	$td = $(btn).parent();
	$inputs = $td.children();
	$count = parseFloat($inputs.eq(1).val());
	if($count<=1 && n<0){
		return;
	}
	$count = $count + n;
	$inputs.eq(1).val($count);
	$price = parseFloat($td.prev().html());
	$money = $price * $count;
	$td.next().html($money);
	total();
}

</script>
 
</html>
